<template>
    <div class="root">
        <router-link :to="{path:'/sort/kind/skind/skindItem',query:{_id:g._id}}" v-for="g in itemskindAll"  key="v.name">
            <div class="items">
                <div><img :src="'/imgs/goods/'+g.pics[0]"></div>
                <div class="name">{{g.goodsname}}</div>
                <div class="address">{{g.score}}人评价&emsp;
                {{g.site}}</div>
                <div class="info">
                    <span>￥</span>{{g.price}}
                    <span class="sales">销量{{g.sales?g.sales:0}}</span>
                    <span class="other">...</span>
                </div>
            </div>
        </router-link>
    </div>
</template>

<script>
    export default {
        props: ["itemskindAll"]
    }
</script>

<style scoped>
    .root {
        background-color: rgb(245, 245, 245);
        height: calc(100vh - 98px);
        overflow-x: hidden;
        overflow-y: scroll;
        display: flex;
        flex-wrap: wrap;
        z-index:1;
    }
    
    .items {
        width: 47vw;
        margin-bottom: 8px;
        background-color: white;
        margin-right: 9px;
    }
    
    img {
        width: 45vw;
        height: 45vw;
        margin: 0 1vw;
    }
    
    .name {
        width: 140px;
        line-height: 18px;
        color: black;
        padding: 3px 8px;
        font-size: 12px;
        overflow: hidden;
        text-overflow: ellipsis;
        word-wrap: nowrap;
    }
    .address {
        padding: 3px 8px;
        width: 100%;
        text-align: left;
        font-size: 12px;
        color: #666666;
    }
    
    .info {
        padding: 3px 8px;
        color: orangered;
    }
    
    .sales {
        color: #999999;
        padding: 0 3px;
        font-size:12px;
    }
    
    .other {
        color: #666666;
    }
</style>